/*
 ES6中新增IntersectionObserver：创建一个监听器，监听一个或多个DOM元素，监听这些DOM元素，和可视窗口的“交叉”状态发生改变，也可以获取此时元素和可视窗口的交叉信息值！
 */
const picBox = document.querySelector('.pic-box'),
    img = picBox.querySelector('img');

// 实现图片懒加载
const lazyImage = function lazyImage() {
    let trueImg = img.getAttribute('data-image'),
        tempImg = new Image;
    tempImg.src = trueImg;
    tempImg.onload = () => {
        img.src = trueImg;
        img.style.opacity = 1;
    };
};

// 创建监听器，监听元素是否出现在可视窗口中
let ob = new IntersectionObserver(changes => {
    let item = changes[0];
    if (item.isIntersecting) {
        // 完全出现在可视窗口中
        lazyImage();
        // 处理完则移除监听 item.target:监听的DOM元素
        ob.unobserve(item.target);
    }
}, { threshold: [1] });
ob.observe(picBox);



/* IntersectionObserver中传递的callback函数执行：
  + 开始监听DOM元素成功，会执行一次！
  + 监听的DOM元素，只有和可视窗口的交叉状态改变
    默认：一露头和完全消失触发  => { threshold: [0] }
    完全出现再触发 => { threshold: [1] }
    ...
*/
/* const ob = new IntersectionObserver(
    (changes) => {
        // changes数组，包含所有监听DOM元素的交叉信息
        //   + boundingClientRect
        //   + isIntersecting 是否出现在可视窗口中
        //   + target 获取监听的DOM元素
        // ....
        let item = changes[0];
        console.log(item);
    },
    { threshold: [1] }
);
ob.observe(picBox); */